<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米6立即购买-小米商城</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/web.js" ></script>
	</head>
	<body>
		<div id="app">
	<!-- start header -->
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li><a href="index.html" target="_blank">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr"><a href="gouwuche.html">购物车</a></div>
					<div class="fr">
						<ul>
							<li><a style="cursor:pointer" v-on:click="jump()" target="_blank">{{omg}}</a></li>
							<li>|</li>
							<li><a href="./register.html" target="_blank" >注册</a></li>
							<li>|</li>
							<li><a href="">消息通知</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
			<a href=""><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
					<!--模糊搜索全部商品-->
					<li v-on:click="search()"><a href="#">全部商品</a></li>
					<!--点击时传入类名（如小米手机），存下来跳到下一页时取出-->
					<li v-on:click="go2('小米手机')"><a href="#" >小米手机</a></li>
					<li v-on:click="go2('红米手机')"><a href="#" >红米手机</a></li>
					<li v-on:click="go2('笔记本电脑')"><a href="#"  >笔记本电脑</a></li>
					<li v-on:click="go2('电视')"><a href="#"  >电视</a></li>
					<li v-on:click="go2('路由器')"><a href="#"  >路由器</a></li>
					<li v-on:click="go2('智能硬件')"><a href="#"  >智能硬件</a></li>
				</ul>
			</div>
			<div class="search fr">
				<form action="search.html">
					<div class="text fl">
						<input id="inp" type="text" class="shuru"  >
					</div>
					<div class="submit fl">
						<!--模糊搜索商品-->
						<input type="submit" class="sousuo" value="搜索" v-on:click="search()" />
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->

	
	<!-- xiangqing -->
	<form action="post" method="">
	<div class="xiangqing">
		<div class="neirong w">
			<div class="xiaomi6 fl">{{name}}</div>
			<nav class="fr">
				<li><a href="">概述</a></li>
				<li>|</li>
				<li><a href="">变焦双摄</a></li>
				<li>|</li>
				<li><a href="">设计</a></li>
				<li>|</li>
				<li><a href="">参数</a></li>
				<li>|</li>
				<li><a href="">F码通道</a></li>
				<li>|</li>
				<li><a href="">用户评价</a></li>
				<div class="clear"></div>
			</nav>
			<div class="clear"></div>
		</div>	
	</div>
	
	<div class="jieshao mt20 w" >
		<div class="left fl"><img v-bind:src="photourl+photo"></div>
		<div class="right fr">
			<div class="h3 ml20 mt20">{{name}}</div>
			<div class="jianjie mr40 ml20 mt10">{{comment}}</div>
			<div class="jiage ml20 mt10">{{price}}元</div>
			<div class="ft20 ml20 mt20">选择版本</div>
			<div class="xzbb ml20 mt10">
				<!--在规格和颜色框里加点击事件，把从数据库取得到的数据赋给go函数，这个数据相当于跟循环的列表里的每个s.productPrice值绑定了，点击哪个显示哪个对应的s.productPrice值-->
				<!--把查到的规格和价格通过go函数赋给data,实现双向绑定-->
				<div class="banben fl" v-for="s in array" v-on:click="go(s.productPrice,s.productStandard)"  >
					<a >
						<span >{{s.productStandard}}</span>
						<span>{{s.productPrice}}元</span>
					</a>
				</div>
				<!--<div class="banben fl">
					<a>
						<span>全网通版 6GB+128GB</span>
						<span>2899元</span>
					</a>
				</div>-->
				<div class="clear"></div>
			</div>
			<div class="ft20 ml20 mt20">选择颜色</div>
			<div class="xzbb ml20 mt10">
				<div class="banben fl" v-for="c in list" v-on:click="goColor(c.productColor)" >
					<a>
						<span class="yuandian"></span>
						<span class="yanse" >{{c.productColor}}</span>
					</a>
				</div>
				
			</div>
			<div class="xqxq mt20 ml20">
				<div class="top1 mt10">
					<div class="left1 fl">{{name}}</div>
					<div class="right1 fr">{{price}}元</div>
					<div class="clear"></div>
				</div>
				<div class="bot mt20 ft20 ftbc">{{standard}} {{color}}</div>
				
			</div>
			
			<div class="xiadan ml20 mt20">
					<input class="jrgwc"  type="button" name="jrgwc" value="收藏" v-on:click="collect()" />
					<input class="jrgwc" type="button" name="jrgwc" value="加入购物车" v-on:click="pay()"/>
				
			</div>
		</div>
		<div class="clear"></div>
	</div>
	</form>
	<!-- footer -->
	<footer class="mt20 center">
			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：151-3503-4757，本网站所列数据，除特殊说明，所有数据均出自昭平科技实验室测试</div>

		</footer>
</div>
	</body>
	<script>
		var a=window.sessionStorage.getItem("code");
		//alert(a);
		varvue=new Vue({
			el:"#app",
			data:{
				lmuid:window.sessionStorage.getItem("loginUserid"),
				isNull:"",
				comment:"",
				price:"",
				name:"",
				standard:"",
				color:"",
				photo:"",
				array:[],
				list:[],
				bord:"",
				isA: true,
 				isB: false,
 				photourl:window.web_server_static,
 				web_server:window.web_server,
 				productid:"",
 				uuu:window.sessionStorage.getItem('loginUsername'),
				omg:'',
			},
			created:function(){
				this.init(),
				this.first(),
				this.two(),
				this.dengl()
				
			},
			methods:{
				dengl:function(){
//						var uuu=window.sessionStorage.getItem('loginUsername');
						if(this.uuu==null){
							this.omg="登录";														
						}else{
								this.omg=this.uuu;
						}													
					},
					jump:function(){
					if(this.uuu!=null){
						window.location.href="self_info.html";
					}else{
						window.location.href="login.html";
					}
				},
				//这个请求得到商品名字，描述
				init:function(){
					var self=this;
					//alert(a);
					var params=new URLSearchParams();
					params.append("productCode",a);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+'api/product/detail',params).then(function(res){
						//取出查询返回的数据
						var result=res.data;
//						var c=JSON.stringify(result.data);
//							alert(c);
						if(result.status==200){
							self.comment=result.data[0].productComment;
							self.name=result.data[0].productName;
							self.photo=result.data[0].productPhoto;
						}
						
					})
				},
				//这个请求得到商品规格，价钱
				first:function(){
					var self=this;
//					alert(a);
					var params=new URLSearchParams();
					params.append("productCode",a);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+'api/product/standprice',params).then(function(res){
						//取出查询返回的数据
						var result=res.data;
//						var c=JSON.stringify(result.data);
//							alert(c);
						if(result.status==200){
							self.array=result.data
						
						}
						
					})
				},
				//这个请求得到商品颜色
				two:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("productCode",a);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+'api/product/color',params).then(function(res){
						//取出查询返回的数据
						var result=res.data;
//						var c=JSON.stringify(result.data);
//							alert(c);
						if(result.status==200){
							self.list=result.data
						}
						
					})
				},
				go:function(price,standard){
					this.price=price;	
					this.standard=standard;	
				},
				goColor:function(color){
					this.color=color;
				},
				
				pay:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("name",this.name);
					params.append("price",this.price);
					params.append("color",this.color);
					//查询商品productId
					//必须要写
						axios.defaults.withCredentials = true;
						axios.post(window.web_server+'api/product/selectid',params).then(function(res){
						//取出查询返回的数据
						var result=res.data;
						if(result.status==200){
							//传productId
							var m=result.data[0].productId;
							self.productid=m;
							console.log(m)
							//传入ProductId
							var params1=new URLSearchParams();
							params1.append("UserId",self.lmuid);
							params1.append("ProductId",self.productid);
							params1.append("TotalPrice",self.price);
							//必须要写
							axios.defaults.withCredentials = true;
							axios.post(web_server+"api/cart/add",params1).then(function(res1){
							var result1=res1.data;
							if(result1.status==200){
								window.location.href="buysuccess.html"
							}
						})	
						}else{
							alert("失败")
						}
					})
				},
				collect:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("name",this.name);
					params.append("price",this.price);
					params.append("color",this.color);
					//查询商品productId
					//必须要写
						axios.defaults.withCredentials = true;
						axios.post(web_server+'api/product/selectid',params).then(function(res){
						//取出查询返回的数据
						var result=res.data;
						if(result.status==200){
							//传productId
							var m=result.data[0].productId;
							self.productid=m;
//							console.log(m)
							//传入ProductId
							var params=new URLSearchParams();
							params.append("UserId",self.lmuid);
							params.append("ProductId",self.productid);
							params.append("ProductPhoto",self.photo);
							params.append("ProductPrice",self.price);
							console.log(self.productid);
							console.log(self.photo);
							console.log(self.price);
							//必须要写
							axios.defaults.withCredentials = true;
							axios.post(web_server+"api/collect/add",params).then(function(res){
//									var c=JSON.stringify(res);
//									alert(c);
								var result=res.data;
								if(result.status==200){
									alert("收藏成功")
								}
							})
						}else{
							alert("失败")
						}
					})
				},
				go2:function(cname){
					//存类名
					//alert("4")
					window.sessionStorage.setItem("name",cname);
					
					if(1==1){
						window.location.href="liebiao.html";
					}
				},
				search:function(){
					var a=document.getElementById("inp").value;
					if(1==1){
						window.sessionStorage.setItem("fuzzy",a);
						window.location.href="search.html";
					}
					//alert()
					
				}
			}
		})
		
	</script>
</html>